<template name="livechatRealTimeMonitoring">
	{{#requiresPermission 'view-livechat-real-time-monitoring'}}
	<form class="form-inline">
		<div class="form-group rc-select lc-analytics-header">
			<select id="lc-analytics-options" class="rc-select__element js-interval">
				<option class="rc-select__option" value="5">5 {{_ "seconds"}}</option>
				<option class="rc-select__option" value="10">10 {{_ "seconds"}}</option>
				<option class="rc-select__option" value="30">30 {{_ "seconds"}}</option>
				<option class="rc-select__option" value="60">1 {{_ "minute"}}</option>
			</select>
			<i class="icon-angle-down"></i>
		</div>
		{{#if hasDepartments }}
			<div class="form-group ">
				{{> livechatAutocompleteUser
					onClickTag=onClickTagDepartment
					list=selectedDepartments
					onSelect=onSelectDepartments
					collection='CachedDepartmentList'
					endpoint='livechat/department.autocomplete'
					field='name'
					sort='name'
					placeholder="Select_a_department"
					name="department"
					icon="queue"
					noMatchTemplate="userSearchEmpty"
					templateItem="popupList_item_channel"
					template="roomSearch"
					noMatchTemplate="roomSearchEmpty"
					modifier=departmentModifier
				}}
			</div>
		{{/if}}
	</form>
	{{#if isLoading}}
		{{> loading }}
	{{else}}
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				<div class="lc-analytics-overview">
					{{#each conversationsOverview}}
					<div class="lc-analytics-ov-col">
						<div class="lc-analytics-ov-case">
							<span class="title">{{_ title}}</span>
							<span class="value">{{value}}</span>
						</div>
					</div>
					{{/each}}
				</div>
			</div>
		</div>
	</div>
	{{/if}}
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-doughnut-chart">
			<div class="section-content border-component-color">
				<div class="lc-monitoring-chart-container">
					<canvas id="lc-chats-chart"></canvas>
				</div>
			</div>
		</div>
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				<div class="lc-monitoring-chart-container">
					<canvas id="lc-chats-per-agent-chart"></canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				{{#if isLoading}}
					{{> loading }}
				{{else}}
				<div class="lc-analytics-overview">
					{{#each chatsOverview}}
					<div class="lc-analytics-ov-col">
						<div class="lc-analytics-ov-case">
							<span class="title">{{_ title}}</span>
							<span class="value">{{value}}</span>
						</div>
					</div>
					{{/each}}
				</div>
				{{/if}}
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-doughnut-chart">
			<div class="section-content border-component-color">
				<div class="lc-monitoring-chart-container">
					<canvas id="lc-agents-chart"></canvas>
				</div>
			</div>
		</div>
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				<div class="lc-monitoring-chart-container">
					<canvas id="lc-chats-per-dept-chart"></canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				{{#if isLoading}}
					{{> loading }}
				{{else}}
				<div class="lc-analytics-overview">
					{{#each agentsOverview}}
					<div class="lc-analytics-ov-col">
						<div class="lc-analytics-ov-case">
							<span class="title">{{_ title}}</span>
							<span class="value">{{value}}</span>
						</div>
					</div>
					{{/each}}
				</div>
				{{/if}}
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				<div class="lc-monitoring-chart-container">
					<canvas id="lc-chat-duration-chart"></canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="section-content border-component-color">
				{{#if isLoading}}
					{{> loading }}
				{{else}}
				<div class="lc-analytics-overview">
					{{#each timingOverview}}
					<div class="lc-analytics-ov-col">
						<div class="lc-analytics-ov-case">
							<span class="title">{{_ title}}</span>
							<span class="value">{{value}}</span>
						</div>
					</div>
					{{/each}}
				</div>
				{{/if}}
			</div>
		</div>
	</div>
	<div class="lc-monitoring-flex">
		<div class="section lc-monitoring-line-chart-full">
			<div class="lc-monitoring-chart-container">
				<canvas id="lc-reaction-response-times-chart"></canvas>
			</div>
		</div>
	</div>
	{{/requiresPermission}}
</template>
